<template>
  <div class="page">
    <div class="income-page">
      <c-title :hide="false" text="收益明细"></c-title>
      <div class="income-bg">
        <div class="income-user flex">
          <van-image width="3.4375rem" height="3.4375rem" round :src="userInfo.avatar" />
          <div class="name">{{ userInfo.nickname }}</div>
        </div>
        <div class="earnings flex-j-sa">
          <div class="flex-a-c">
            <div class="account-price">￥{{ sumMoney }}</div>
            <div class="account-name">累计收益</div>
          </div>
          <div class="flex-a-c">
            <div class="account-price">￥{{ finishMoney }}</div>
            <div class="account-name">已结算</div>
          </div>
          <div class="flex-a-c">
            <div class="account-price">￥{{ waitMoney }}</div>
            <div class="account-name">未结算</div>
          </div>
        </div>
      </div>

      <div class="mb20"></div>
      <div class="income-list">
        <div class="income-tabs">
          <van-tabs custom-class="border-b" :active="incomeStatus" line-width="1.875rem" @change="onIncomeChange" title-inactive-color="#454545" title-active-color="#F15353">
            <block v-for="(item, index) in incomeTabs" :key="index">
              <van-tab :title="item.name" :name="item.status"></van-tab>
            </block>
          </van-tabs>
        </div>
        <div class="income-content" v-if="incomeList.length > 0">
          <block v-for="(item, index) in incomeList" :key="index">
            <div class="income-item flex-j-sb">
              <div>
                <div class="income-sn">订单编号：{{ item.order_sn }}</div>
                <div class="time">时间：{{ item.examine_time }}</div>
              </div>
              <div class="income-itemRight">
                <div class="price">￥{{ item.reward_money }}</div>
                <div class="status">{{ item.is_reward ? "已结算" : "未结算" }}</div>
              </div>
            </div>
          </block>
        </div>
        <van-empty description="空空如也" v-else />
      </div>
    </div>
  </div>
</template>
<script>
import incomeDetail_controller from "./incomeDetail_controller.js";
export default incomeDetail_controller;
</script>
<style scoped>
.income-page ::v-deep .van-nav-bar {
  background-color: #ff3a00;
}

.income-page ::v-deep .van-nav-bar__title {
  color: #fff;
}

.income-page ::v-deep .van-nav-bar__left .van-button {
  background-color: #ff3a00 !important;
}

.income-page ::v-deep .van-nav-bar {
  border-bottom: 1px solid #ff3a00;
}

.income-page ::v-deep .van-nav-bar .van-icon {
  color: #fff;
}
</style>
<style lang="scss" scoped>
.income-bg {
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/details_bg.png");
  background-size: 100% 80%;
  background-repeat: no-repeat;
}

.mb20 {
  height: 0.625rem;
  clear: both;
}

.income-user {
  padding: 1.6875rem 0.625rem 1.0938rem 0.625rem;

  .name {
    margin-left: 0.4375rem;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
  }
}

.earnings {
  background-color: #fff;
  margin: 1.5rem 0 0 0;
  border-radius: 0.3125rem;
  padding: 1.0938rem 0 1.125rem 0;
  margin: 0 0.625rem;

  div {
    flex-direction: column;
  }
}

.account-price {
  font-size: 0.8125rem;
  font-weight: bold;
  color: #f14e4e;
  margin-bottom: 0.6875rem;
}

.account-name {
  font-size: 0.6875rem;
  font-weight: bold;
  color: #696969;
}

.border-b {
  border-bottom: 0.0625rem solid #f2f2f2;
}

.income-list {
  margin: 0 0.625rem;

  .income-tabs {
    padding: 0 0.875rem 0 0.8125rem;
    background-color: #fff;
  }

  .income-item {
    background-color: #fff;
    padding: 0.875rem 0.8438rem 0.9375rem 0.8438rem;
    margin-bottom: 0.625rem;
  }
}

.income-item {
  .income-sn {
    font-size: 0.8125rem;
    color: #353535;
    margin-bottom: 0.5rem;
  }

  .time,
  .status {
    font-size: 0.6875rem;
    color: #838383;
  }

  .time {
    text-align: left;
  }
}

.income-itemRight {
  text-align: right;
}

.income-item .price {
  font-size: 0.8125rem;
  margin-bottom: 0.5rem;
  color: #f15353;
}
</style>
